0

Help me, how to set each column same height? I have this structure:

<div class="container">
 <div class="row">
 <div class="col-md-3 col-sm-6">
 <!--content-->
 </div>
 <div class="col-md-3 col-sm-6">
 <!--content-->
 </div>
 <div class="col-md-3 col-sm-6">
 <!--content-->
 </div>
 <div class="col-md-3 col-sm-6">
 <!--content-->
 </div>
 </div>
</div>

In this case, the content displayed is as follows: enter image description here

But when I try to resize the browser window, the content is shifted wrong: enter image description here

And so should: enter image description here

How to fix it?

asked Feb 27, 2015 at 13:04
4
  • Possible duplicate - stackoverflow.com/questions/18020360/… Commented Feb 27, 2015 at 13:16
  • min-height min-height Commented Feb 27, 2015 at 14:27
  • @knitevision, What do you mean? Commented Feb 27, 2015 at 14:35
  • @Pearson sorry i thought you mean having same height o_O Commented Feb 27, 2015 at 14:38

2 Answers 2

2

One way would be to add a clearfix that's only visible on the smaller viewports..

<div class="container">
 <div class="row">
 <div class="col-md-3 col-sm-6">
 <!--content-->
 </div>
 <div class="col-md-3 col-sm-6">
 <!--content-->
 </div>
 <div class="clearfix visible-sm"></div>
 <div class="col-md-3 col-sm-6">
 <!--content-->
 </div>
 <div class="col-md-3 col-sm-6">
 <!--content-->
 </div>
 </div>
</div>

http://bootply.com/ZDDbPlCraT

answered Feb 27, 2015 at 13:34
Sign up to request clarification or add additional context in comments.

Comments

-1

create a custom css class in your .css file

.fixed-height {
height: 200px;
}

Then add this to your HTML as follows:

<div class="container">
 <div class="row">
 <div class="col-md-3 col-sm-6 fixed-height">
 <!--content-->
 </div>
 <div class="col-md-3 col-sm-6 fixed-height">
 <!--content-->
 </div>
 <div class="col-md-3 col-sm-6 fixed-height">
 <!--content-->
 </div>
 <div class="col-md-3 col-sm-6 fixed-height">
 <!--content-->
 </div>
 </div>
</div>
answered Feb 27, 2015 at 13:56

2 Comments

you could get more complex and customise the fixed-height class based on screen size - but above works across all situations
umm... sorry but this works, and addresses the question exactly so why the downvote? bootply.com/QCh2TiB8cx

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.